import './Si.css'
import { Add, File, Home, Jingdou,Order,PackageCheck,Lower,Shop,User,Top } from '@nutui/icons-react'
import React, { useRef, useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import axios from 'axios'
import img15 from '../public/15.png'
import { useNavigate } from 'react-router-dom'

function Si() {
  const navigate = useNavigate()
  const location = useLocation()
  const _id = location.search.split('=')[1]
  const [user, setUser] = useState({})
  function getuser(){
    axios.get(`http://localhost:3500/user?_id=${_id}`).then(res=>{
      setUser(res.data.data)
    })
  }
  useEffect(()=>{
    getuser()
  },[])

  const handleClick = () => {
    window.location.href = `/app/si/car?id=${_id}`
  }


    return (
        <div className='xob'>
            <div className='xob1'>
                <img src={img15} alt="" />
                <h2>{user.username}</h2>
                <p>账号名:{user.username}</p>
            </div>
            <div className='obx3'>
                <h1>VO黑铁会员 | </h1>
                <p>专享1724元劵包待领取  </p>
                <span>  立即查看</span>
            </div>
            <div className='xob2'>
                <div className='xob3'>
                    <h5>1</h5>
                    <p>积分</p>
                </div>
                <div className='xob3'>
                    <h5>1</h5>
                    <p>优惠劵</p>
                </div>
                <div className='xob3'>
                    <h5>0</h5>
                    <p>快递E卡</p>
                </div>
            </div>
            <div className='xob4'>
                <h1>我的钱包</h1>
                <div style={{display:'flex',justifyContent:'space-around'}}>
                  <div className='xob5'>
                      <h3><File /></h3>
                      <p>我的订单</p>
                  </div>
                  <div className='xob5'>
                      <h3><Home /></h3>
                      <p>我的支付</p>
                  </div>
                  <div className='xob5'>
                      <h3><Jingdou /></h3>
                      <p>我的积分</p>
                  </div>
                  <div className='xob5'>
                      <h3><Order /></h3>
                      <p>我的钱包</p>
                  </div>
                </div>

            </div>
            <div className='xob6'>
                <h1>我的工具</h1>
                <div>
                  <div className='xob7'>
                      <h3><PackageCheck /></h3>
                      <p>寄件模版</p>
                  </div>
                  <div className='xob7'>
                      <h3><Lower /></h3>
                      <p>客服中心</p>
                  </div>
                  <div className='xob7'>
                      <h3><Shop /></h3>
                      <p>我的发票</p>
                  </div>
                  <div className='xob7'>
                      <h3><User /></h3>
                      <p>地址去薄</p>
                  </div>
                  <div className='xob7'>
                      <h3><File /></h3>
                      <p>专属小哥</p>
                  </div>
                  <div className='xob7'>
                      <h3><Home /></h3>
                      <p>实名认证</p>
                  </div>
                  <div className='xob7'>
                      <h3><Jingdou /></h3>
                      <p>我签收码</p>
                  </div>
                  <div className='xob7'>
                      <h3><Order /></h3>
                      <p>偏好设置</p>
                  </div>
                </div>
            </div>
            <div className='xob8'>
                <h1>其他服务</h1>
                <div className='xob9'>
                    <h3><Top /></h3>
                    <p>入群有礼</p>
                </div>
                <div className='xob9'>
                    <h3><Home /></h3>
                    <p>我亲情号</p>
                </div>
                <div className='xob9'>
                    <h3><Jingdou /></h3>
                    <p>我的礼物</p>
                </div>
                <div className='xob9'>
                    <h3><Order /></h3>
                    <p>包裹旅行</p>
                </div>
                <div className='xob9'>
                    <h3><File /></h3>
                    <p>我的协议</p>
                </div>
                <div className='xob9'>
                    <h3><Home /></h3>
                    <p>理赔中心</p>
                </div>
                <div className='xob9'>
                    <h3><Jingdou /></h3>
                    <p>面单打印</p>
                </div>
                <div className='xob9'>
                    <h3><Order /></h3>
                    <p>功能反馈</p>
                </div>
                <div className='xob9'>
                    <h3><Order /></h3>
                    <p>使用帮助</p>
                </div>
                <div className='xob9'>
                    <h3><File /></h3>
                    <p>号码保护</p>
                </div>
                <div className='xob9'>
                    <h3><Home /></h3>
                    <p>企业福利</p>
                </div>
                <div className='xob9'>
                    <h3><Jingdou /></h3>
                    <p>通关服务</p>
                </div>
            </div>
        </div>
    )
}
export default Si;
